<script setup>
import { reactive, ref, watch } from 'vue'
import { useUserStore } from "@/stores/counter";
import { getClockingin } from "@/api/clockingin"
const userStore = useUserStore();
const userMsg = userStore.userMsg;
const token = userMsg.token;
// const initData = []
const initData = []
const proData = reactive([]);
getClockingin({ token }).then(res => {
    for (let i = 0; i < res.data.data.length; i++) {
        initData[i] = res.data.data[i]
        console.log(initData[i],'===========================');
        const m1 = new Date(parseInt(initData[i].morning)).toLocaleString();
        const a1 = new Date(parseInt(initData[i].afternoon)).toLocaleString();
        initData[i].morning = m1.slice(10,);
        initData[i].afternoon = a1.slice(10,);
        initData[i].date1 = m1.slice(0,10)
        console.log(initData[i]);
        proData[i] = res.data.data[i]
    }
    proData.forEach(item => { console.log(item.morning); })
    // const aaa = new Date(parseInt(1642467900000)).toLocaleString()
    // console.log('--------', aaa);
})

const value = ref('')
const options = [
    {
        value: '-1',
        label: '全部',
    },
    {
        value: '0',
        label: '正常',
    },
    {
        value: '1',
        label: '迟到',
    },
    {
        value: '2',
        label: '早退',
    },
    {
        value: '3',
        label: '缺卡',
    },
    {
        value: '4',
        label: '加班',
    },
    {
        value: '5',
        label: '请假',
    },
    {
        value: '6',
        label: '出差',
    },
]
watch(value, (newX) => {
    proData.splice(0)
    if (newX === '-1') {
        for (let i = 0; i < initData.length; i++) {
            proData[i] = initData[i]
        }
        return
    }
    const newData = initData.filter(i => i.attStatus === newX)
    for (let i = 0; i < newData.length; i++) {
        proData[i] = newData[i]
    }
})
// switch (i.attStatus) {
//                                 case '0': i.attStatusShow = '正常'; break
//                                 case '1': i.attStatusShow = '迟到'; break
//                                 case '2': i.attStatusShow = '早退'; break
//                                 case '3': i.attStatusShow = '缺卡'; break
//                                 case '4': i.attStatusShow = '加班'; break
//                                 case '5': i.attStatusShow = '请假'; break
//                                 case '6': i.attStatusShow = '加班'; break
//                                 default: i.attStatusShow = '？'
//                             }
</script>


  
<template>
    <div>
        <h2> 考勤管理 </h2>
    </div>
    <el-select v-model="value" class="m-2" aria-placeholder="状态">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-table :data="proData" border style="width: 100%">
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="date1" label="日期" />
        <el-table-column prop="morning" label="早晨签到时间" />
        <el-table-column prop="afternoon" label="下午结束时间" />
        <el-table-column prop="attStatusShow" label="状态" />
    </el-table>
</template>


<style>

</style>